<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="Jxz">
    <title>小米商场首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="image/mi.png" type="image/png">
    <link rel="icon" href="image/mi.png" type="image/png">
    <style>
    html,body{
           height: 100%;
        }
    body{
        margin: 0;
        background-color: #eee;   
        }
      #bt {
             font-size: 10vw;
             position: absolute;
             right: 5vw;
             top:calc(50% - 10vw);
             color:#FFFFFF ;
             text-decoration: none;
         }
    #photo{
        background-image: url(image/ios.png);
        background-size: 100%;
        width: 100%;
        height: 20vw;
        background-repeat: no-repeat; 
        padding-bottom: 0;
        margin-bottom: 0;
        position: relative;
    }
    section{
        font-size: 3vw;
        margin-top: 0;
        line-height: 5vw;
        padding-bottom: 2vw;

    }
    section a{
        text-decoration: none;
        color:gray;
    }
    section a:hover{
        text-decoration: none;
        color: gray;
    }
    section span{
        margin-left: 8vw;

    }
    .border-bottom{
        border-bottom: 1px solid lightgray;
        width: 100%
    }
      .item img{
           width: 100%;
       }
       .col-md-12 {
           padding: 0;
       }
       .img{
           margin-top:10px; 
           text-align: center;
       }
       .img img{
           width: 20vw;
       }
 
     .infor{
         background-color:white;
         width: 100%;
         height: 50vh;
         margin-top: 16vw;
         vertical-align: middle;
         margin-top: 0;
         margin-bottom: 0;
         vertical-align: middle;
     }
     .infos img{
         width: 10vw;
         float: left;
         position: relative;
         top: 2rem;
       
     }
     .infos section{
         margin-top: 0;
         float: left;
         color: gray;
         position: relative;
         top: 0.8vw;
     }
     .infos section h2{
         font-size: 1.5vw;
     }
     .infos section p{
         font-size: 1.2vw;
         line-height: 2vw;
        
     }
     .p-control{
         font-size: 0.1vw;
         color: red;
         position: relative;
         top: -1.2vw;

     }
     .clear{
         clear:both;
     }
     .height{
         width: 100%;
         height: 110px;
         background-color: white;
     }
     #xp{
         position: relative;
         left: -9vw;
     }
     .relative{
        position: relative;
         left: -9.8vw;
     }
     .relative section{
         position: relative;
         left: 2vw;
     }
     @media (max-width:480px){
      .infos section p{
             position: relative;
             top: -0.8vw;
             font-size: 0.8vw;
             left:0vw;
             margin: 0.5vw;
         }

         .infos section  h2{
             font-size: 0.01vw;
             
         }
         .p-control{
             position: relative;
             top: 10vw;
             font-size: 0;
             
         }
     }

       /*@media (max-width:320px){
      .infos section p{
             position: relative;
             top: -2vw;
             left: 5vw
           
         }
         .p-control{
             position: relative;
             top: 10vw;
             
         }
     }*/
    /*页脚*/
    footer{
        height:100px;
        width: 100%;
        background-color: white;
        position: fixed;
        bottom: 0;

    }
      nav{
            display: flex;
            line-height: 35px;
            margin-bottom: 0;
            justify-content: space-around;
        }
        nav a{
            font-size: 3rem;
            font-weight: normal;
            color: gray;
            display: block;    
        }
        .picture{
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url(image/spr1.png);

        }
        .r1c7{
          background-position: 0 -360px;
        }
        .r1c1{
            background-position: 0 0;
        }
        .r1c3{
            background-position: 0 -120px;
        }
        .r1c4{
            background-position: 0-240px;
        }
     
     </style>
     </head>

    <body>
    <div id="photo" class="alert alert-dismissible" role="alert">
    <button id="bt" type="button" class="close" data-dismiss="alert" ><span>&times;</span></button>
     </div>
     <section>
    <a href="http://m.mi.com/1/#/search/index">
    <span class="glyphicon glyphicon-search"></span>搜索商品名称</a>
    <div class="border-bottom"></div>
    </section>
    <!--轮播图-->
    <div>
    <div  class="col-md-12 ">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!--轮播图指示灯-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
      <!--轮播图的资源-->
        <div class="carousel-inner" role="listbox">
        <div class="item active">
        <!--图片-->
        <img src="image/1.jpg" alt="...">
         </div>

        <div class="item">
        <img src="image/2.jpg" alt="...">
        </div>
        <div class="item">
        <img src="image/3.jpg" alt="...">
        </div>
        </div>
        </div>
        <!--渣格-->
        <div>
        <div class="col-lg-4 col-md-4 col-xs-4">
         <div class="img"><img src="image/4.png" alt=""></div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="img"><img src="image/5.png" alt=""></div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4">
         <div class="img"><img src="image/6.png" alt=""></div>
        </div>
        <div>
         <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="img"><img src="image/7.png" alt=""></div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="img"><img src="image/8.png" alt=""></div>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4">
        <div class="img"><img src="image/9.png" alt=""></div>
        </div>
        </div>
        <div class="clear"></div>
        </div>
        <div class="clear"></div>
    <!--手机价格-->
        <div class="infor">
        <div class="infos">
         <img src="image/h.jpg" alt="">
         <section>
          <h2>红米Note4</h2>
          <p>Helio X20十核旗舰处理器/全球一体化机身/4100mAh大电量
           <p class="p-control">899元 起</p>
          </p>
         <!--<div class="clear"></div>-->
         </section>
         </div>
        <div class="clear"></div>
         <div class="border-bottom"></div>
          <div class="clear"></div>
          <div class="infos">
         <img src="image/bj.jpg" alt="">
         <img id="xp" src="image/xp.png" alt="">    
         <section class="relative">
          <h2>小米笔记本</h2>
          <p>轻薄全金属/11.5小时超长续航、支持1C快充/intel酷睿m3处理器/FHD全贴合屏幕
           <p class="p-control">3499元 </p>
          </p>
         </section> 
         <div class="clear"></div>
         <div class="border-bottom"></div>
         </div>
         <div class="clear"></div>
          <div class="infos ">
         <img src="image/hongmi.jpg" alt="">
         <section>
          <h2>红米手机3X</h2>
          <p>高晓龙430 八核处理器/2GB内存+32G存储/标配指纹识别/全网通4G双待/高光亮边金属机身
           <p class="p-control">799元 </p>
          </p>
         </section>
         </div>
         <div class="clear"></div>
         <div class="border-bottom"></div>
          </div>
          <div class="height"></div>
     <!--页脚-->
      <footer>
        <nav>
        <a href="小米商城首页.html">
        <div class="picture r1c7"></div>
        <p>商城</p>
        </a>
        <a href="商城分类.html">
         <div class="picture r1c1"></div>
        <p>分类</p> 
        </a>
        <a href="小米购物车.html">
         <div class="picture r1c3"></div>
        <p>购物车</p>
        </a>
        <a href="个人中心.html">
        <div class="picture r1c4"></div>
        <p>服务</p>
        </a>
    </nav>
    </footer>



<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

  
</body>

</html>